import { defineComponent, ref } from 'vue';
import { useUserInfoStore } from '@/domain/authority/hooks/login';
import { Button, Popconfirm, Avatar, Popover } from 'ant-design-vue';
import ziti from '@/project/dataBoard/assets/images/nav_logo.png';
import tx from '@/project/dataBoard/assets/images/pic_default_photo.png';
export default defineComponent({
  name: 'headers',
  setup(props, { slots }) {
    const store = useUserInfoStore();

    const downloadStatus = ref(false);
    const hoverStatus = ref(false);

    const changeOpenStatus = (status: boolean) => {
      downloadStatus.value = status;
    };
    return () => (
      <>
        <div class={'h-16 px-6 py-3  bg-white flex items-center'} style={{ boxShadow: '2px 2px 6px 0 hsl(0deg 0% 80% / 50%)' }}>
          <img class="inline-block align-top w-60 h-auto" alt="" src={ziti}></img>
          {slots.default ? slots.default() : null}
          {store.state.isLoginStatus ? (
            <div class={'absolute w-32 right-4 leading-r2.2  text-center inline-block top-2  align-top'}>
              {/* <Popover
                placement="bottom"
                class={'w-r8 h-auto'}
                content={() => (
                  <div class={' hover:text-red-650 w-r8 h-r2.3 leading-r2.4 text-center text-sm'}>
                    <span class={'mr-2 iconfont icon-icon_out '} />
                    <span
                      class={'cursor-pointer'}
                      onClick={() => {
                        store.toLoginOut();
                      }}
                    >
                      退出登陆
                    </span>
                  </div>
                )}
              >
                <Avatar class={' inline-block w-8 h-8 mr-3'}  src={tx}></Avatar>
                <span class={'text-xs'}> {store.state.userInfo?.name}</span>
              </Popover>  */}
            </div>
          ) : null}
        </div>
      </>
    );
  }
});
